<template>
	<a-flex gap="middle" align="center" vertical>
		<DataCollection :columns="metadate.columns" 
			:loading="$demo1Store.loading"
			:dataGrid="$demo1Store.dataGrid" 
			:page="$demo1Store.paging.page"  
			:pageCount="$demo1Store.paging.pageCount" 
			:pageSize="$demo1Store.paging.pageSize"
			:itemCount="$demo1Store.paging.itemCount"
		>
			<template #action="{key, record}">
				page 2 -{{key}}-{{record.title}}
			</template>
		</DataCollection>
	</a-flex>
</template>

<script setup>
	import {reactive, computed, onMounted} from 'vue';
	import DataCollection from '@/components/DataCollection.vue'
	import metadate from '@/meta/demo.js'
	
	import { demo1Store } from '@/stores/demo1.js'
	
	const $demo1Store = demo1Store();
	
	onMounted(()=>{
		$demo1Store.dataQuery();
		console.log("page1====> onMounted");
	});
</script>

<style scoped>
</style>